import React, { useState, useEffect } from 'react'
import { Card, Table, Button, Checkbox, Drawer, Tag, Modal, Form, message } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import request from '@/utils/request'
import SaveView from './save'
const { confirm } = Modal


export default () => {
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [drawerVisable, setDrawerVisable] = useState(false)
    const [tableData, setTableData] = useState({ list: [], total: {} })
    const [specItems, setSpecItems] = useState([{ item_id: 0, item_title: "" }])
    const [id, setId] = useState(0)

    const [form] = Form.useForm()
    const rowSelection = {
        selectedRowKeys: selectedKeys,
        onChange: (selectedRowKeys: any) => {
            setSelectedKeys(selectedRowKeys)
        },
    };

    const columns: any = [
        {
            title: '规格名称',
            width: "220px",
            dataIndex: 'title',
            render: (text: any) => text,
        },
        {
            title: '规格属性',
            dataIndex: 'items_str',
            render: (text: any) => text,
        },
        {
            title: '启用',
            dataIndex: 'enable',
            render: (text: any) => <Checkbox checked={text} />,
            align: "center",
            width: "120px",
        },
        {
            title: '排序',
            width: "120px",
            dataIndex: 'sort',
            align: "center",
            render: (text: any) => <Tag color="green">{text}</Tag>
        },
        {
            title: '操作',
            width: "160px",
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" type="primary" ghost onClick={() => {

                        setDrawerVisable(true)
                        setId(record.id)
                        request(`/goods/spec/${record.id}`).then((result) => {
                            const data = result.data
                            form.setFieldsValue(data)
                            const itemList = data.item_list.map((item: any) => {
                                return {
                                    item_id: item.id,
                                    item_title: item.title,
                                }
                            })
                            setSpecItems(itemList)
                        })

                    }}>修改</Button>

                    <Button size="small" style={{ marginLeft: "5px" }} danger onClick={() => destroy([record.id])}>删除</Button>
                </>
            ),
        },
    ];



    const getList = (params = {}) => {
        request(`/goods/spec-list`, { params }).then((result) => {
            const {list,total}=result.data
            setTableData({ list,total })
        })
    }


    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/goods/spec-destroy`, {
                    method: "Delete",
                    params: { ids },
                }).then((result) => {
                    message.success("删除成功")
                    getList()
                })
            }
        });
    }

    useEffect(() => {
        getList();
    }, [])

    const ToolBtn = () => {
        return (
            <div>
                <Button type="primary" danger style={{ marginRight: "6px" }} onClick={() => {
                    const tableIds = tableData.list.map((item: any) => item.id)
                    let selectIds: [] = [];
                    selectedKeys.forEach((item) => {
                        if (tableIds.includes(item)) {
                            selectIds.push(item)
                        }
                    })

                    if (selectIds.length < 1) {
                        message.warn("请选择你要操作的选项")
                        return
                    }
                    destroy(selectIds)
                }}>批量删除</Button>

                <Button type="primary" ghost onClick={() => {
                    setId(0)
                    setDrawerVisable(true)
                    setSpecItems([{ item_id: 0, item_title: "" }])
                    form.resetFields()
                }}>添加规格</Button>
            </div>
        );
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card title={<ToolBtn />}>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={tableData.list}
                    rowSelection={rowSelection}

                    onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
                        getList({ current: pagination.current });
                    }}
                />
                <Drawer
                    title="商品规格"
                    placement="right"
                    onClose={() => {
                        setDrawerVisable(false)
                    }}
                    visible={drawerVisable}
                    width="30%"
                    getContainer={false}
                >
                    <SaveView
                        close={() => setDrawerVisable(false)}
                        form={form}
                        specItems={specItems}
                        setSpecItems={(items: any) => {
                            setSpecItems(items)
                        }}
                        getList={getList}
                        id={id}
                    />
                </Drawer>
            </Card>
        </PageHeaderWrapper>
    );
}